<template>
    <div>
   <common-head title="增加联系人"/>
   <van-form @submit="onSubmit">
   <van-cell-group>
        <van-field 
          :rules="[{ required: true, message: '必须要填写' }]"
         v-model="contact.linkMan" label="姓名" />
    
        <van-field  
        
         :rules="[{required: true, message: '必须要填写'},{ pattern: /^1(3|4|5|7|8)\d{9}$/, message: '请输入正确手机号' },
        
        ]" v-model="contact.mobile" type="tel" label="手机号" />
     
       <van-cell title="地区" is-link :value="region" @click="showClick" />
      
        <van-field
         :rules="[{ required: true, message: '请输入正确内容' }]"
         v-model="contact.address" type="text" label="详细地址" />
      
        <van-field v-model="contact.code" type="number" label="邮政编码" />

        <van-cell center title="设置默认地址">
  <template #right-icon>
    <van-switch v-model="contact.isDefault" size="24"/>
  </template>
</van-cell>
</van-cell-group>
<van-button round type="info" size="large" native-type="submit" style="margin-top:20px">确定</van-button>
</van-form>
<!-- 底部弹出层 -->
<van-popup v-model="show" round position="bottom" :style="{ height: '40%' }">
    <van-area title="标题" :area-list="areaList" @confirm='choseArea'/>
</van-popup>
    </div>
</template>

<script>
import commonHead from '_components/commonHead'
import { areaList } from '@vant/area-data'
import { addComtant } from '_api'
import { getToken } from '_utils'
import { Toast } from 'vant'
    export default {
        name:'contentadd',
        data() {
            return {
               contact:{
                   linkMan:'',
                   mobile:'',
                   address:'',
                   provinceId:'',
                   cityId:'',
                   isDefault:false,
                   districtId:'',
                   code:''
               },
               show:false,
               areaList:areaList,
               region:'省/市/区'
            }
        },
        methods:{
            onSubmit(){
           addComtant({
              ...this.contact,
              token:getToken()
           }).then(res =>{
               Toast({
                   type:'success',
                   message:'添加联系人成功',
                   onClose:()=>{
                        this.$router.go(-1)
                   }
               })
           })
            },
            showClick(){
                this.show=true
            },
          choseArea(area){
              this.contact.provinceId=area[0].code
              this.contact.cityId=area[1].code
              this.contact.districtId=area[2].code
              this.region=area[0].name+'/'+area[1].name+'/'+area[2].name
              this.show=false
          }
        },
  components: { 
      commonHead },
        
    }
</script>

<style lang="scss" scoped>

</style>